<%--
  Created by IntelliJ IDEA.
  User: 01182800
  Date: 2017/2/27
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="scripts/jquery.js" type="text/javascript" charset="UTF-8"></script>
<script>
(function($) {
    $(function() {
        $.fn.extend({
            /**
             * 表单序列化成JSON
             * serializeArray 原结果是 [{name1:value1},{name2:value2}]
             * {name1:value1, name2:value2}
             */
            serializeJson : function(ignoreEmpty) {
                var val = {};
                var array = this.serializeArray();
                $(array).each(function() {
                    if (!(ignoreEmpty === true && this.value === "")) {
                        if (val[this.name] !== undefined) {
                            if ($.isArray(val[this.name])) {
                                val[this.name].push(this.value);
                            } else {
                                val[this.name] = [val[this.name], this.value];
                            }
                        } else {
                            val[this.name] = this.value;
                        }
                    }
                });
                return val;
            }
        });


        /**
         * 扩展jQuery.postJSON方法
         */
        $.postJSON = function(url, data, success, resultType) {
            return $.ajax({
                url: url,
                type: 'post',
                data: JSON.stringify(data),
                contentType: 'application/json',
                dataType: resultType || 'json',
                success: success
            });
        };

        let   $userList = $('#user-list')
            , $userForm = $('#user-form')
            , $userFormSubmit = $('#user-form-submit-button');

        $.get('webapi/users', function(json) {
            json.forEach(function(user) {
                $userList.append($('<li/>').data('id', user.id).text(JSON.stringify(user)));
            });
        }, 'json');

        $userFormSubmit.on('click', function(e) {
            e.preventDefault();
            let data = $userForm.serializeJson();

            $.postJSON('webapi/users', data, function(json) {
                location.href = location.href;
            });
        });
    });
})(jQuery);
</script>
</head>
<body>
    <h2>User Resource</h2>

    <div>
        <form id="user-form" method="post">
            <table>
                <tr>
                    <td><label for="name">Name</label></td>
                    <td><input type="text" id="name" name="name" value=""/></td>
                </tr>
                <tr>
                    <td><label for="age">Age</label></td>
                    <td><input type="number" id="age" name="age" value=""></td>
                </tr>
                <tr>
                    <td colspan="2"><button id="user-form-submit-button">Submit</button></td>
                </tr>
            </table>
        </form>
    </div>

    <hr/>

    <div>
        <form action="webapi/users/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="file"/>
            <input type="submit" value="Upload"/>
        </form>
    </div>

    <hr/>

    <div>
        <ul id="user-list"/>
    </div>

</body>
</html>